<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="/layui/webupload/dist/webuploader.min.js"></script>
  <link href="layui/webupload/dist/css/webuploader.css" rel="stylesheet" />
  <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body >
<!---->
<button class="layui-btn" onclick="openLayer()">大文件上传</button>







<script>



<!--webuploader初始化，需要在layer弹出后初始化才有用-->
  function initPanel() {
    $list = $('#thelist');

   var uploader = WebUploader.create({

      // swf文件路径
      swf: 'layui/webupload/dist/Uploader.swf',

      // 文件接收服务端的url
      server: '/test',

      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#picker',


      chunked:true,

    });

    uploader.on('fileQueued', function( file ) {//添加进下载队列

      $("#c_table").show();
      var tr = $(['<tr id="' + file.id + '" class="item">'
        ,'<td style="padding-left:10px" >'+ file.name +'</td>'
        ,'<td class="text-center">'+ (file.size/1014).toFixed(1) +'kb</td>'
        ,'<td class="text-center"><span class="state">等待上传</span><div class="layui-progress layui-progress-big "><div class="layui-progress-bar" role="progressbar" style="width: 0%"></div></div></td>'
        ,'<td class="text-center">'
        , '<button class="layui-btn" style="background-color: red">删除</button>'
        ,'</td>'
        ,'</tr>'].join(''));

      //删除
      tr.find('.layui-btn').on('click', function(){
        uploader.removeFile(file); //删除对应的文件
        tr.remove();
      });

      $list.append(tr);
    });

    uploader.on( 'uploadProgress', function( file, percentage ) {
      var $tr =  $('#'+file.id ),
              tds = $tr.children(),
              $percent = tds.eq(2).find('.layui-progress-bar');
      $tr.find('.demo-delete').attr('disabled', true);
      tds.eq(2).find("span.state").html('上传中:'+ Math.round(percentage*100) + '%');
      if(percentage == 1){
        tds.eq(2).find("span.state").html('处理中...');
      }
      $percent.css( 'width', percentage * 100 + '%' );
    });

    uploader.on( 'uploadSuccess', function( file ) {
      $( '#'+file.id ).find('span.state').text('已完成');
      var $tr =  $('#'+file.id );
      setTimeout(function() {
        uploader.removeFile(file);
        $tr.remove();
      },2000);
    });

    uploader.on( 'uploadError', function( file ) {
      $( '#'+file.id ).find('span.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
      $( '#'+file.id ).find('.progress').fadeOut();
    });

    $('#ctlBtn').click(function(){
      uploader.upload();
    });


  }





</script>


<script type="text/javascript" src="layui/layui.js"></script>
<script>
  var layer;
  layui.use(['form', 'layedit', 'laydate'], function(){
    layer = layui.layer


  });

  function openLayer() {

    layer.open({
      type: 1,
      title: '测试',
      shadeClose: true,
      shade: false,
      maxmin: false, //开启最大化最小化按钮
      area: ['650px', '600px'],
      content: $('#BigFilePanel'),
        success: function(layero, index){
            initPanel();
        }
    });
  }
</script>

</body>
<div class="main-box-body clearfix" style="display: none; height:750px" id="BigFilePanel">
  <div class="btns">
    <div id="picker" class="layui-inline layui-btn" style="background-color: #00a2d4">选择文件</div>
    <button id="ctlBtn" class="layui-btn layui-inline">开始上传</button>
  </div>

  <div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="dndArea" >

      <div >
        <table  id="c_table" style="width: 600px" lay-skin="nob"  class="layui-table">
          <thead>
          <tr>
            <th style="width: 35%;text-align: center">文件名</th>
            <th  style="width: 10%;text-align: center">大小</th>
            <th  style="width: 45%;text-align: center">状态</th>
            <th  style="width: 10%;text-align: center">操作</th>
          </tr>
          </thead>
          <tbody id="thelist"></tbody>
        </table>
      </div>
    </div>

  </div>
</div>
</html>